<template>
  <div>
    <yj-dialog
      :modal="modal"
      :width="dialog.width"
      :title="dialog.title"
      :dialogVisible="dialog.visible"
    >
      <template slot="dialog-content">
        <el-form :model="label" size="mini" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="label.name"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="label.phone"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="label.password"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" style="text-align:center" class="dialog-footer">
          <el-button size="mini" @click="cancelCargoBtn">取 消</el-button>
          <el-button size="mini" type="primary" @click="saveCargoBtn">确 定</el-button>
        </div>
      </template>
    </yj-dialog>

    <table-frame
      ref="frame"
      :getDataUrl="prop.getDataUrl"
      :removeUrl="prop.removeUrl"
      :searchShow="prop.searchShow"
      :operateShow="prop.operateShow"
      :location="prop.location"
      :searchModel="prop.searchModel"
      :reloadTable="prop.reloadTable"
      :colunmsCount="prop.colunmsCount"
    >
      <template slot="top_operate" slot-scope="currentRow">
        <el-button type="primary" @click="add()" size="mini">添加</el-button>
      </template>

      <template slot="columns">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column prop="orderCount" label="业务单子"></el-table-column>
        <el-table-column prop="royaltyMoney" label="提成收入"></el-table-column>
        <el-table-column prop="allMoney" label="总单子收入"></el-table-column>
        <el-table-column prop="createTime" sortable label="创建时间"></el-table-column>
        <el-table-column prop="updateTime" sortable label="更新时间"></el-table-column>
      </template>

      <template slot="operate">
        <auth role="admin">
          <template slot="auth">
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini"></el-button>
                <el-button
                  type="danger"
                  @click="del(scope.row.id)"
                  icon="el-icon-delete"
                  size="mini"
                ></el-button>
              </template>
            </el-table-column>
          </template>
        </auth>
      </template>
    </table-frame>
  </div>
</template>
<script>
let _this = {};
import searchModel from "./Search.vue";
export default {
  data() {
    return {
      dialog: {
        width: "40%",
        title: "新增/修改",
        visible: false,
        modal: true
      },
      prop: {
        searchShow: true,
        operateShow: true,
        location: " 员工列表",
        getDataUrl: "/emp/list",
        removeUrl: "/emp/remove/?",
        searchModel: searchModel,
        reloadTable: false,
        colunmsCount: 7
      },

      label: {
        id: "",
        name: "",
        password: ""
      },

      visible: false,

      URL: {
        list: "/emp/list",
        save: "/emp/save",
        update: "/emp/update",
        remove: "/emp/remove/?"
      }
    };
  },
  created() {},
  methods: {
    add() {
      this.dialog.visible = true;
    },
    edit(row) {
      //alert("编辑：" + JSON.stringify(row));
      this.setDataToForm(row);
      this.dialog.visible = true;
    },
    cancelCargoBtn() {
      this.dialog.visible = false;
      this.setDataToForm(null);
    },
    isPoneAvailable(phone) {
      var regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;
      if (!regex.test(phone)) {
        return false;
      }
      return true;
    },
    saveCargoBtn() {
      if (this.label.name.trim() == "") {
        this.$warning("请输入用户名");
        return;
      }

      let flag = this.isPoneAvailable(this.label.phone + "");
      if (!flag) {
        this.$warning("请输入正确的手机号");
        return;
      }

      if (this.label.name == "" || this.label.password.trim() == "") {
        this.$warning("请把数据填写完");
        return;
      }

      if (
        this.label.id != undefined &&
        this.label.id != null &&
        this.label.id != ""
      ) {
        this.update();
      } else {
        this.save();
      }
    },
    save() {
      this.$post(this.URL.save, this.label).then(res => {
        this.reqResult(res);
      });
    },
    update() {
      this.$put(this.URL.update, this.label).then(res => {
        this.reqResult(res);
      });
    },
    reqResult(res) {
      if (res.R) {
        this.$success("操作成功");
        this.dialog.visible = false;
        this.setDataToForm(null);
        this.reloadTable();
      }
    },
    setDataToForm(row) {
      if (row == null) {
        this.label.name = "";
        this.label.phone = "";
        this.label.password = "";
        this.label.id = "";
      } else {
        this.label.name = row.name;
        this.label.id = row.id;
        this.label.phone = row.phone;
        this.label.password = row.password;
      }
    },
    del(id) {
      this.$confirm("此操作将永久删除已选数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$del(this.URL.remove.replace("?", id), {}).then(res => {
          if (res.R) {
            this.$success("已删除");
            this.reloadTable();
          }
        });
      });
    },
    reloadTable() {
      _this = this;
      this.prop.reloadTable = true;
      setTimeout(() => {
        _this.prop.reloadTable = false;
      }, 1000);
    }
  }
};
</script>
<style scoped>
</style>